<!DOCTYPE html>
<style>
body > div {
  display: inline-block;
  margin: 15px;
  width: 70px;
  height: 90px;
  border-radius: 30px 40px 50px 70px;
  border: 10px solid lightgray;
  outline: 10px solid green;
}
div > div {
  display: inline-block;
  width: 200px;
  height: 50px;
}
</style>
<div style="outline-offset: -5px"></div>
<div></div>
<div style="outline-offset: 5px"></div>
<div style="outline-style: dotted; outline-offset: -5px"></div>
<div style="outline-style: dotted"></div>
<div style="outline-style: dotted; outline-offset: 5px"></div>
<div style="outline-style: dashed; outline-offset: -5px"></div>
<div style="outline-style: dashed"></div>
<div style="outline-style: dashed; outline-offset: 5px"></div>
<div style="outline-style: double; outline-offset: -5px"></div>
<div style="outline-style: double"></div>
<div style="outline-style: double; outline-offset: 5px"></div>
<div style="outline-style: ridge; outline-offset: -5px"></div>
<div style="outline-style: ridge"></div>
<div style="outline-style: ridge; outline-offset: 5px"></div>
<div style="outline-style: groove; outline-offset: -5px"></div>
<div style="outline-style: groove"></div>
<div style="outline-style: groove; outline-offset: 5px"></div>
<div style="outline-style: inset; outline-offset: -5px"></div>
<div style="outline-style: inset"></div>
<div style="outline-style: inset; outline-offset: 5px"></div>
<div style="outline-style: outset; outline-offset: -5px"></div>
<div style="outline-style: outset"></div>
<div style="outline-style: outset; outline-offset: 5px"></div>
